import React from 'react';
import styles from './Top.less';
import editImg from '../assets/edit.png';
const Top = ({ name, phone, role, shopName, onEdit, headImg, shopNO}) => {
  return (
    <div className={styles.topbg}>
      <a className={styles.edit} >
        <img src={editImg} className={styles.editImg} onClick={()=>onEdit()} />
      </a>
      <div className={styles.smile}>
        <img src={headImg} className={styles.headImg} />
        {/* <a className={styles.edit} >
          <img src={editImg} className={styles.editImg} onClick={()=>onEdit()} />
        </a> */}
        <span className={styles.role}>
          {role}
        </span>
      </div>
      <div className={styles.contentInfo}>
        <div>
          <span className={styles.name}>{name}</span>
          <span className={styles.phone}>{phone}</span>
          {/* <span className={styles.role}>{role}店员</span> */}
        </div>
        <div className={styles.shopName}>
          { shopName ? `${shopName}(${shopNO})` : ''}
        </div>
      </div>
    </div>
  );
}

Top.propTypes = {
};
export default Top;
